<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>组件添加状态</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
    //类式组件
    class Wscats extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          date: new Date,
          num: 1
        } // 给组件添加状态
        this.handleClick = this.handleClick.bind(this)
      }
      handleClick(e) {
        console.log(this)
        e.preventDefault
        this.setState({
          num: ++this.state.num
        })
        console.log("clicked")
      }
      changeTime() {
        this.setState({date: new Date()})
      }
      // 生命周期函数
      componentDidMount() {
        setInterval(() => {
          console.log(this)
          this.changeTime()
        }, 1000)
      }
      render() {
        return (
          <div>
            <h1>
              {this.props.name}</h1>
            <h2>现在时间是：{this.state.date.toLocaleTimeString()}</h2>
            <p>计数：{this.state.num}</p>
            <button onClick={this.handleClick}>点击计数</button>
          </div>
        )
      }
    }
    //组件的组合
    function App() {
      return (
        <div>
          <Wscats name="Oaoafly"/>
        </div>
      );
    }

    ReactDOM.render(
      <App/>, //自闭合标签
        document.getElementById('root'));
    </script>
  </body>
</html>
